@charset "UTF-8";

/*
基础样式
1、布局类，弹性布局，以 flex- 开头，浮动布局，应该直接写入对应的类名中，不添国公用的样式；
2、公用类，以 p- 开头，显示、隐藏，隐藏过长字符，清除浮动，web font字体使用 （必须为公共的东西，用不用到都必须保留的的类），
*/


//1、布局类------------------------------------------------------------------------------------------------------------------
/*
 flex layout.
 supported browsers,IE10+,firefox39+,chrome31+,safari8+,opera32+,all modern browsers.
 弹性布局，只适用于现在浏览器，IE10+ firefox39+,chrome31+,safari8+,opera32以版本，
 IE9-以下浏览器，及移动端页面应该使用 浮动布局
*/


//水平布局，使子元素靠左对齐，用于父元素
.flex-h,
.flex-h-left{
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -webkit-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-box;
  /* TWEENER - IE 10 */
  display: -ms-flexbox;
  /* NEW - Chrome */
  display: -webkit-flex;
  /* W3C */
  display: flex;
}

//水平布局，使子元素靠右对齐，用于父元素
.flex-h-right{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}

//水平布局-使子元素两端对齐，子元素间自动会空出间距，用于父元素
//取消间距，需要给每个子元素设置伸缩属性，flex: 1; 使用子元素按比例进行自动填充；即 添加 flex-average
//也可将最后一个子元素宽设为100%,即width:100%，强制取消间距；
.flex-h-space{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}


//水平布局-使子元素居中对齐，且没有间距，用于父元素
.flex-h-center{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

//水平布局-使子元素相对于父元素，在垂直方向上居中对齐，用于父元素
//所有子元素都会相对于父元素垂直居中，有多个子元素时会从左到右排列；
.flex-h-mid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}



//垂直布局---子元素在水平方向上默认靠左，可以通过 text-align:center，使用其水平居中
//垂直布局，使子元素在垂直方向上靠上对齐，用于父元素；
.flex-v,
.flex-v-top{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;

}

//垂直布局，使子元素垂直方向上靠下对齐，用于父元素；
.flex-v-bottom{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: end;
  -webkit-justify-content:flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content:flex-end;
}


//垂直布局，使子元素，垂直分布于父元素内，用于父元素；
//所有子元素都会垂直居中，有多个子元素时会从上到下排列，与 flex-h-mid的区别是子元素的上下/左右排列；
.flex-v-mid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: center;
  -webkit-justify-content:center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content:center;
}


//垂直布局-使子元素在垂直方向上两端对齐，子元素间自动会空出间距，用于父元素
//取消间距，需要给每个子元素设置伸缩属性，flex: 1; 使用子元素按比例进行自动填充； 即 添加 flex-average
.flex-v-space{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}



//水平，垂直居中显示，如图片在很多地方都会用于的一个类-----------------------绝对居中
.flex-abs-mid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;

  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;

  -ms-flex-pack: center;
  -webkit-justify-content:center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content:center;
}




//水平/垂直布局，设置子元素伸缩比例，用于子元素；
//使子元素平均分配宽度
.flex-average{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}


//水平/垂直布局，当子元素总宽超出父元素时，使子元素换行排列，用于父元素上
.flex-rows{
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}










//2、公用类------------------------------------------------------------------------------------------------------------------

//文字超出容器长度时自动隐藏，必须强制容器为 block，才会生效
//如果有多列时，必须使用浮动布局(可以不指定具体宽度)，才会使最后一列生成 ...   效果；
.p-text-hide{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//居中对齐
.p-text-center{
  text-align: center;
}

//居右对齐
.p-text-right{
  text-align: right;
}


//修复被padding或border破坏的布局
.p-box-sizing{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


//强制隐藏
.p-hide{
  display: none !important;
}

//强制显示
.p-show{
  display: block !important;
}

.hide {
  display: none;
}
.show{
  display: block;
}



//清除浮动
.p-clear-fix{
  &:after{
    content: "";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear:both;
    overflow:hidden;
  }
}


//添加css动画效果前需要使用此公共类，具体效果应写在对应的:hover中，
//如 .res:hover{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.p-tran{
  transition:  .3s all;
}


//将元素显示为圆形，多用于头像上的效果；
.p-circle{
  display: block;
  overflow: hidden;
  border-radius: 50%;
}


//灰度图
.p-gray{
  -webkit-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter:grayscale(100%);
}


//英文或数字，使用Arial字体，字体大小为16px，1倍行高；
.p-arial{
  font-family: Arial ;
}
.p-impact{
  font-family: Impact;
}

/*
web font 的使用，也以公用类的形式来处理，只引用给需要更改字体的项中，
使用方式：先引用字体文件，再设置公用类，最后添加到对应的元素上；
英文字体，可以在  http://www.fontsquirrel.com/tools/webfont-generator 上生成，先行下载到一种字体，然后再将字体文件上传，最后生成下载即可
中文字体，先下载好无版权的 .ttf 格式的字体文件，再通过 font-spider，分析页面，从字体文件中提取出需要的文字，最后再生成各类型的字体文件供使用，

例子
英文字体

//引用字体文件
@font-face {
  font-family: 'oswaldregular';
  src: url('../../font/Oswald/oswald-regular-webfont.eot');
  src: url('../../font/Oswald/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../../font/Oswald/oswald-regular-webfont.woff2') format('woff2'),
  url('../../font/Oswald/oswald-regular-webfont.woff') format('woff'),
  url('../../font/Oswald/oswald-regular-webfont.ttf') format('truetype'),
  url('../../font/Oswald/oswald-regular-webfont.svg#oswaldregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.p-oswaldregular{
    font-family: oswaldregular;
}

中文字体，使用前要先使用 font-spider处理；

*/

@font-face {
  font-family: 'oswaldlight';
  src: url('/res/font/Oswald/oswald-light-webfont.eot');
  src: url('/res/font/Oswald/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('/res/font/Oswald/oswald-light-webfont.woff2') format('woff2'),
  url('/res/font/Oswald/oswald-light-webfont.woff') format('woff'),
  url('/res/font/Oswald/oswald-light-webfont.ttf') format('truetype'),
  url('/res/font/Oswald/oswald-light-webfont.svg#oswaldlight') format('svg');
  font-weight: normal;
  font-style: normal;

}

.p-oswald-light{
  font-family: oswaldlight;
}

@font-face {
  font-family: 'open_sanslight';
  src: url('/res/font/opensans/opensans-light-webfont.eot');
  src: url('/res/font/opensans/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('/res/font/opensans/opensans-light-webfont.woff2') format('woff2'),
  url('/res/font/opensans/opensans-light-webfont.woff') format('woff'),
  url('/res/font/opensans/opensans-light-webfont.ttf') format('truetype'),
  url('/res/font/opensans/opensans-light-webfont.svg#open_sanslight') format('svg');
  font-weight: normal;
  font-style: normal;

}

.p-open-sans{
  font-family: open_sanslight;
}




/*
默认的元素，链接样式
*/
body {
  color: #fff;
  font-size: 14px;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "SimSun";
  background: url("/res/images/bg/single/index-section-bg.png")  repeat-y  #0d0d0d;

  background-position: 0 174px;

}
h1, h2, h3 {  font-size: 16px;  }
h4, h5, h6 { font-size: 12px;  }
a:link,
a:visited{
  text-decoration: none;
  color: #fff;
}
a:hover {
  color:#d74e36;
}

.container{
  width: 1200px;
  margin: 0 auto;
}
